<template>
    <el-card class="content" style="height: 100%">
        <template #header>
            <div class="header">
                <h3>设备类型</h3>
                <el-button v-if="hasButton" type="primary" @click="handleManageClick"
                    >管理</el-button
                >
            </div>
        </template>
        <template v-for="item of sblxList" :key="item.typecode">
            <el-button class="button" type="primary" @click="handleDeviceClick(item.typecode)">
                <span class="sblx">{{ item.typename }}</span>
            </el-button>
        </template>
    </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue"

import { getSblx } from "@/api/main/zhpzgj/sbwh"

const props = defineProps({
    hasButton: {
        type: Boolean,
        default: false,
    },
})
const emit = defineEmits(["deviceClick", "manageClick"])
const sblxList = ref<any>()

function handleDeviceClick(data: any) {
    emit("deviceClick", data)
}

function handleManageClick() {
    emit("manageClick")
}

function getSblxList() {
    getSblx().then((res) => {
        if (res.code == 0) {
            sblxList.value = res.data
            if (props.hasButton) {
                sblxList.value.unshift({ typecode: "", typename: "全部" })
            }
        }
    })
}
getSblxList()
</script>

<style lang="less" scoped>
.content {
    max-height: 90vh;
    overflow-y: auto;
    .button {
        width: 9vw;
        height: 40px;
        margin: 5px 0;
    }
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .header > h3:first-child {
        font-size: 1vw;
        border-left: 5px solid #1e9fff;
        padding-left: 5px;
    }
}
</style>
